<template>
  <view class="web-upload-container">
    <u-upload :deletable="deletable" :multiple="multiple" :previewImage="previewImage"
      :accept="accept" :uploadText="uploadText" :fileList="fileList1"
      @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="maxCount"></u-upload>
  </view>
</template>

<script>
  import props from './props';
  import {
    app
  } from '@/config/app'
  export default {
    name: "WebUpload",
    mixins: [ props ],
    data() {
      return {
        fileList1: [],
        baseUrl: app.baseUrl,
      };
    },
    watch: {
      fileList: {
        handler( values ) {
          if ( !values ) return ( this.fileList1 = [] );
          const type = Object.prototype.toString.call( values );
          // 对 fileList 进行 多种 判断处理 --- > 最终结果 还是 以数组 为准
          if ( type === '[object String]' ) values = [ {
            url: values
          } ];
          if ( type === '[object Object]' ) values = [ values ];
          this.fileList1 = values.map( _item => ( {
            response: {
              ..._item.response || _item.url || {}
            },
            status: _item.status || 'done',
            name: _item.fileName || _item.name || _item.url,
            uid: _item.uuid,
            thumbUrl: ( _item.url || _item.path || _item ),
            id: _item.id,
            url: _item.url || _item.path || _item
          } ) )
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      // 删除图片
      deletePic( event ) {
        this[ `fileList${event.name}` ].splice( event.index, 1 )
      },
      // 新增图片
      async afterRead( event ) {
        console.log( event );
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat( event.file )
        let fileListLen = this[ `fileList${event.name}` ].length
        lists.map( ( item ) => {
          this[ `fileList${event.name}` ].push( {
            ...item,
            status: 'uploading',
            message: '上传中'
          } )
        } )
        for ( let i = 0; i < lists.length; i++ ) {
          const result = await this.uploadFilePromise( lists[ i ].url )
          let item = this[ `fileList${event.name}` ][ fileListLen ]
          this[ `fileList${event.name}` ].splice( fileListLen, 1, Object.assign( item, {
            status: 'success',
            message: '',
            url: result
          } ) )
          fileListLen++
        }
      },
      uploadFilePromise( url ) {
        return new Promise( ( resolve, reject ) => {
          let a = uni.uploadFile( {
            url: this.baseUrl + this.uploadApi,
            filePath: url,
            name: this.name,
            formData: {},
            header: {
              "Authorization": uni.getStorageSync( 'token' ),
            },
            success: ( res ) => {
              // console.log(res,'upload');
              const {
                file
              } = JSON.parse( res.data )
              // 将成功的 图片 抛出去
              this.$emit( 'setFilesList', file )
              resolve( res )
            }
          } );
        } )
      },
    }
  }
</script>

<style lang="scss">

</style>